import React, {
  useState,
  useMemo,
  useEffect,
  useCallback,
  useRef
} from 'react';
import './todo.css'
// import { } from './todo'

let idSeq = new Date();

function Control(props) {
  const { addTodo } = props;
  const inputRef = useRef()
  const onSubmit = (e) => { // 没有向任何子组件传递，所以不需要用useCallback包裹
    console.log(e, 'e-----e')
    e.persist()
    e.preventDefault();
    const newText = inputRef.current.value.trim()
    if (newText.length === 0) {
      return;
    }
    addTodo({
      id: ++idSeq,
      text: newText,
      complete: false
    })
    inputRef.current.value = ''
  }

  return <div className="control">
    <h1>todos</h1>
    <form onSubmit={onSubmit}>
      <input
        ref={inputRef}
        type="text"
        className="new-todo"
        placeholder="What needs to be done?"
      />
    </form>
  </div>
}

// 列表的li组件
function TodoItem(props) {
  let {
    todo: {
      id, text, complete
    },
    toggleTodo,
    removeTodo
  } = props;

  const onChange = () => {
    toggleTodo(id)
  }

  const onRemove = () => {
    removeTodo(id)
  }

  return <li className="todo-item">
    <input
      type="checkbox"
      onChange={onChange}
      checked={complete}
    />
    <label className={complete ? "complete" : ""}>{text}</label>
    <button onClick={onRemove}>&#xd7;</button>
  </li>
}

// 列表组件
function Todos(props) {
  let { todos, toggleTodo, removeTodo } = props
  return (
    <ul>
      {
        todos.map(todo => {
          return (
            <TodoItem
              key={todo.id}
              todo={todo}
              toggleTodo={toggleTodo}
              removeTodo={removeTodo}
            />
          )
        })
      }
    </ul>
  )
}

function TodoList() {
  let [todos, setTodos] = useState([]);
  const addTodo = useCallback((todo) => {
    setTodos(todos => [...todos, todo])
  })
  const removeTodo = useCallback((id) => {
    setTodos(todos => todos.filter(todo => {
      return todo.id !== id
    }))
  })
  const toggleTodo = useCallback((id) => {
    setTodos(todos => todos.map(todo => {
      return todo.id === id ?
        {
          ...todo,
          complete: !todo.complete
        } : todo;
    }))
  })

  useEffect(() => {
    const todos = JSON.parse(localStorage.getItem('LS_KEY')) || []
    setTodos(todos)
  }, [])

  useEffect(() => {
    localStorage.setItem('LS_KEY', JSON.stringify(todos))
  }, [todos])

  return <div className="todo-list">
    <Control addTodo={addTodo} />
    <Todos
      removeTodo={removeTodo}
      toggleTodo={toggleTodo}
      todos={todos}
    />
  </div>
}

export default TodoList;


